<template>
  <van-uploader 
  :before-read="beforeRead"
   v-model="fileList"
   :before-delete="deleteFile"
   :after-read="afterRead" max-count="1" :preview-size="40" accept="accept" :max-size="maxSize" @oversize="onOversize">
    <p class="upload_txt">请选择</p>
  </van-uploader>
  <image-cropper
    :visible="isShow"
    :url="imgUrl"
    @on-cancel="isShow = false"
    @on-success="cropperSuccess"
  />
</template>
<script setup>
import ImageCropper from '@/components/imageCropper'
import { showToast } from 'vant';
import { ref, watch } from 'vue'
import Qiniu from '@/utils/qiniu'
import { getUploadInfo } from '@/api'
let props = defineProps({
   url: {
    type: String,
    default: ''
  },
  maxSize: {
    type: Number,
    default: 1024 * 1024 * 5
  },
  accept: {
    type: String,
    default: '.png, .jpg, .jpeg'
  }
})

let emits = defineEmits('update:url')
let fileList = ref([])
let imgUrl = ref('')
let isShow = ref(false)
watch(()=> props.url, (url) => {
  if (url) {
    fileList.value = [{ url, name:url }]
  }
}, { immediate: true })
function deleteFile() {
  emits('update:url', '')
  fileList.value = []
}
function onOversize() {
  showToast('图片大小不能超过5M');
}
function beforeRead(file) {
  if (file.type !== 'image/png' && file.type !== 'image/jpeg') {
    Toast('请上传图片');
    return false;
  }
  return true;
}
async function cropperSuccess(file) {
  console.log('裁剪成功')
  isShow.value = false;
  let { data: { token, host, file_path } } = await getUploadInfo({ file_type: 2 })
  
  const res = await Qiniu.Upload(token, host, file_path, file)
  console.log(res)
  //裁剪上传完成
  emits('update:url', res)

}
function afterRead(file) {
  //图片加载完成 进行裁剪
  imgUrl.value = URL.createObjectURL(file.file);
  console.log(imgUrl.value )
  fileList.value.pop()
  //将文件信息传过去
  isShow.value = true;
}
// async handleBeforUpload() {
//   const restoken = await getQiniuToken()
//   if (restoken.code === 200) {
//     this.upload.token = restoken.data
//   }
// },
// handleRemove(file) {
//   this.uploadList.forEach((item, idx, arr) => {
//     if (item.name === file.name) {
//       arr.splice(item, 1)
//       const link = arr.map(item => item.url).join(',')
//       this.$emit('update:uploadList', arr)
//       this.$emit('input', link)
//       this.$emit('success', arr)
//     }
//   })
// },
// async handleRequset(file) {
//   console.log(file)
//   const {
//     upload: { token }
//   } = this

//   try {
//     const { status, src, info: { width, height, duration }} = await Qiniu.Upload(token, file)
//     if (status === 200) {
//       const arr = [{ url: src, name: src, width, height, duration }]
//       const upList = [...this.uploadList, ...arr]
//       const link = upList.map(item => item.url).join(',')
//       this.$emit('input', link)
//       this.$emit('success', upList)
//       this.$emit('update:uploadList', upList)
//     }
//   } catch (error) {
//     this.$refs.upload.clearFiles()
//     // this.$message.error('上传凭证过期，请重新上传')
//     // this.handleBeforUpload()
//   }
// },
</script>
<style lang="scss" scoped>
  .upload_txt {
    color: rgba(255,255,255,0.2);
  }
  ::v-deep .van-uploader__preview {
    margin: 0;
  }
</style>